<template>
  <div class="content-wraper">
    <div class="search-box">
      <el-form label-width="100px" :inline="true">
        <el-form-item label="项目名称">
          <el-input v-model="projectName" />
        </el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="search()"
        >查询</el-button>
        <el-button
          type="warning"
          icon="el-icon-refresh"
          @click="reset()"
        >重置</el-button>
        <el-button
          type="success"
          icon="el-icon-plus"
          @click="addCompletionDelivery()"
        >新增</el-button>
      </el-form>
    </div>
    <div class="detail">
      <com-table
        :data="dataList"
        :columns="columns"
        :total="total"
        @pageChange="pageChange"
      >
        <template v-slot:name="{ row }">
          <a class="com-link" @click="viewDetail(row)">{{ row.name }}</a>
        </template>
        <template v-slot:options="{ row }">
          <el-button
            type="success"
            icon="el-icon-edit-outline"
            size="mini"
            @click="startProcess(row)"
          >提交</el-button>
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="editCompletionDelivery(row)"
          >编辑</el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="delCompletionDelivery(row)"
          >删除</el-button>
          <el-button
            type="danger"
            size="mini"
            @click="print(row)"
          >打印</el-button>
        </template>
        <template v-slot:financialInfo="{ row: { financialInfo } }">
          {{ getDictName(completionDeliveryMoveStatus, financialInfo) }}
        </template>
        <template v-slot:financialMoveTime="{ row: { financialMoveTime } }">
          {{ dateFormat(financialMoveTime) }}
        </template>
        <template v-slot:completionInfo="{ row: { completionInfo } }">
          {{ getDictName(completionDeliveryMoveStatus, completionInfo) }}
        </template>
        <template v-slot:completionMoveTime="{ row: { completionMoveTime } }">
          {{ dateFormat(completionMoveTime) }}
        </template>
        <template v-slot:manageInfo="{ row: { manageInfo } }">
          {{ getDictName(completionDeliveryMoveStatus, manageInfo) }}
        </template>
        <template v-slot:manageMoveTime="{ row: { manageMoveTime } }">
          {{ dateFormat(manageMoveTime) }}
        </template>
        <template v-slot:problemInfo="{ row: { problemInfo } }">
          {{ getDictName(completionDeliveryMoveStatus, problemInfo) }}
        </template>
        <template v-slot:problemMoveTime="{ row: { problemMoveTime } }">
          {{ dateFormat(problemMoveTime) }}
        </template>
        <template v-slot:status="{ row }">
          <a
            class="com-link"
            style="text-decoration: underline"
            @click="getWorkflowDetail(row)"
          >{{ row.status | formateFlowStatus }}</a>
        </template>
        <template v-slot:createTime="{ row: { createTime } }">
          {{ dateFormat(createTime) }}
        </template>
      </com-table>
    </div>
    <addCostSettlement
      :show-modal.sync="showModal"
      :opt-type="optType"
      :data="unitDetail"
      @freshList="search"
    />
    <process-start
      :show-modal.sync="showStartModal"
      :currentrow="unitDetail"
      @freshList="search"
    />
    <workflow-schedule
      :show-modal.sync="showWorkflowSchedule"
      :data="workflowScheduleData"
    />
    <section>
      <!--  v-show="printIs == true" -->
      <div v-show="printIs == true" id="printoder" ref="print">
        <table class="printTable">
          <thead>
            <tr>
              <th colspan="6" style="text-align:center;">项目财务结算书</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>工程项目名称:</th>
              <td>{{ dataPrint.projectName }}</td>
              <th>工程完成度:</th>
              <td>{{ dataPrint.finishPercent ||0 }}</td>
              <th>项目负责人:</th>
              <td>{{ dataPrint.projectHead || '无' }}</td>
            </tr>
            <tr>
              <th>项目会计:</th>
              <td>{{ dataPrint.projectAccount|| '无' }}</td>
              <th>填报人:</th>
              <td colspan="3">{{ dataPrint.founderName }}</td>
            </tr>
            <tr>
              <th>项目经营情况:</th>
              <td colspan="5" />
            </tr>
            <tr>
              <th>一、目标成本:</th>
              <td colspan="5">{{ dataPrint.amount0||0 }}</td>
            </tr>
            <tr>
              <th>二、工程账面成本:</th>
              <td colspan="5">{{ dataPrint.amount1||0 }}</td>
            </tr>
            <tr>
              <th>三、项目盈利:</th>
              <td colspan="5">{{ dataPrint.amount2 ||0 }}</td>
            </tr>
            <tr>
              <th>四、项目利润率:</th>
              <td colspan="5">{{ dataPrint.amount3||0 }}</td>
            </tr>
            <tr>
              <th>五、其他情况说明:</th>
              <td colspan="5">{{ dataPrint.amount4||0 }}</td>
            </tr>
            <tr>
              <th>总经理:</th>
              <td colspan="2" />
              <th>财务部:</th>
              <td colspan="2" />
            </tr>
            <tr>
              <th>项目负责人:</th>
              <td colspan="2" />
              <th>项目会计:</th>
              <td colspan="2" />
            </tr>
            <tr>
              <td colspan="6" style="text-align:right;padding-right:20px;">时间:{{ dateFormat(dataPrint.createTime) }}</td>
            </tr>
          </tbody>
        </table>
        <!-- <div class="content">
          <h5 class="title">项目财务结算书</h5>
          <div class="th">
            <div class="th-1">工程项目名称:</div>
            <div class="th-2 br-r">{{ dataPrint.projectName }}</div>
            <div class="th-3">工程完成度:</div>
            <div class="th-4">{{ dataPrint.finishPercent ||0 }}</div>
            <div class="th-5-1 br-r">项目负责人:</div>
            <div class="th-6">{{ dataPrint.projectHead || '无' }}</div>
          </div>
          <div class="th">
            <div class="th-1">项目会计:</div>
            <div class="th-2 br-r">{{ dataPrint.projectAccount|| '无' }}</div>
            <div class="th-3">填报人:</div>
            <div class="th-4-1" />
            <div class="th-5" />
            <div class="th-6-1" />
          </div>
          <div class="th">
            <div class="th-1">项目经营情况:</div>
            <div class="th-7-1" />
          </div>
          <div class="th">
            <div class="th-1">一、目标成本:</div>
            <div class="th-7">{{ dataPrint.amount0||0 }}</div>
          </div>
          <div class="th">
            <div class="th-1">二、工程账面成本:</div>
            <div class="th-7">{{ dataPrint.amount1||0 }}</div>
          </div>
          <div class="th">
            <div class="th-1">三、项目盈利:</div>
            <div class="th-7">{{ dataPrint.amount2 ||0 }}</div>
          </div>
          <div class="th">
            <div class="th-1">四、项目利润率:</div>
            <div class="th-7">{{ dataPrint.amount3||0 }}</div>
          </div>
          <div class="th">
            <div class="th-1">五、其他情况说明:</div>
            <div class="th-7">{{ dataPrint.amount4||0 }}</div>
          </div>
          <div class="th">
            <div class="th-1">总经理:</div>
            <div class="th-2-1" />
            <div class="th-3-1" />
            <div class="th-4">财务部:</div>
            <div class="th-5" />
            <div class="th-6-1" />
          </div>
          <div class="th th-l">
            <div class="th-1">项目负责人:</div>
            <div class="th-2-1" />
            <div class="th-3-1" />
            <div class="th-4">项目会计:</div>
            <div class="th-5" />
            <div class="th-6-1" />
          </div>
          <div class="time">
            时间：
          </div>
        </div> -->
      </div>
    </section>
  </div>
</template>

<script>
import workflowSchedule from '@/components/TreeModal/workflowSchedule'
import {
  getCostSettleInfoList,
  deleteCostSettleInfo
} from '@/api/completedManage'
import moment from 'moment'
import addCostSettlement from './addCostSettlement.vue'
import { getCostSettleInfoDetail } from '@/api/completedManage'
import { completionDeliveryMoveStatus, workflowStatus } from '@/utils/dicData'
import { getDictName } from '@/utils/comm'
export default {
  name: 'CompletionDelivery',
  components: {
    addCostSettlement,
    workflowSchedule
  },
  data() {
    return {
      printIs: false,
      dataPrint: {
        lstCostSettleDetail: []
      },
      projectName: '',
      getDictName,
      completionDeliveryMoveStatus,
      workflowStatus,
      showStartModal: false,
      dataList: [],
      total: 0,
      pageParams: {
        pageNum: 1,
        pageSize: 10
      },
      showWorkflowSchedule: false,
      workflowScheduleData: {},
      showModal: false,
      optType: 'add',
      unitDetail: {},
      columns: [
        {
          fixed: 'left',
          label: '项目名称',
          prop: 'projectName'
        },
        {
          label: '完工程度',
          prop: 'finishPercent'
        },
        {
          label: '项目负责人',
          prop: 'projectHead',
          width: '100'
        },
        {
          label: '项目会计',
          prop: 'projectAccount',
          width: '100'
        },
        {
          label: '项目经营情况',
          prop: 'projectDesc',
          width: '100'
        },
        {
          label: '流程状态',
          prop: 'status',
          slot: 'status'
        },
        {
          label: '编制人',
          prop: 'founderName',
          width: '90'
        },
        {
          label: '编制时间',
          prop: 'createTime',
          slot: 'createTime',
          width: '90'
        },
        {
          fixed: 'right',
          label: '操作',
          width: '350',
          prop: 'options',
          slot: 'options'
        }
      ]
    }
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    print(row) {
      getCostSettleInfoDetail({ costSettleInfoId: row.id })
        .then((res) => {
          this.dataPrint.projectName = res.data.costSettleInfo.projectName
          this.dataPrint.finishPercent = res.data.costSettleInfo.finishPercent
          this.dataPrint.projectHead = res.data.costSettleInfo.projectHead
          this.dataPrint.projectAccount = res.data.costSettleInfo.projectAccount
          this.dataPrint.projectDesc = res.data.costSettleInfo.projectDesc
          this.dataPrint.founderName = res.data.costSettleInfo.founderName
          this.dataPrint.createTime = res.data.costSettleInfo.createTime
          this.dataPrint.amount0 = res.data.lstCostSettleDetail[0].amount
          this.dataPrint.amount1 = res.data.lstCostSettleDetail[1].amount
          this.dataPrint.amount2 = res.data.lstCostSettleDetail[2].amount
          this.dataPrint.amount3 = res.data.lstCostSettleDetail[3].amount
          this.dataPrint.amount4 = res.data.lstCostSettleDetail[4].amount
          this.$forceUpdate()
        })
        .then(() => {
          this.printIs = true
          setTimeout(() => {
            this.$print(this.$refs.print)
          }, 500)
          setTimeout(() => {
            this.printIs = false
          }, 1000)
        })
    },
    getWorkflowDetail(data) {
      this.showWorkflowSchedule = true
      this.workflowScheduleData = data
    },
    startProcess(data) {
      this.unitDetail = data
      this.showStartModal = true
    },
    dateFormat(data) {
      if (data) {
        return moment(data).format('YYYY-MM-DD')
      } else {
        return ''
      }
    },
    pageChange(data) {
      this.pageParams = data
      this.getDataList()
    },
    getDataList() {
      const params = {
        ...this.pageParams,
        projectName: this.projectName
      }
      getCostSettleInfoList(params).then((res) => {
        const { data, total } = res.data || {}
        if (data) {
          this.dataList = data
          this.total = total - 0
        }
      })
    },
    addCompletionDelivery() {
      this.optType = 'add'
      this.showModal = true
    },
    editCompletionDelivery(data) {
      this.optType = 'edit'
      this.unitDetail = data
      this.showModal = true
    },
    viewDetail(data) {
      this.optType = 'detail'
      this.unitDetail = data
      this.showAddFileModal = true
    },
    delCompletionDelivery(data) {
      this.$confirm('确定要删除该成本结算信息吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const { id } = data
          deleteCostSettleInfo({
            CostSettleInfoId: id
          }).then((res) => {
            const { code, msg } = res
            if (code === '0001') {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.getDataList()
            } else {
              this.$message({
                type: 'error',
                message: msg || '删除失败!'
              })
            }
          })
        })
        .catch(() => {})
    },
    search() {
      this.pageParams.pageNum = 1
      this.getDataList()
    },
    reset() {
      this.projectName = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.search-box {
  height: 50px;
}
.detail {
  height: calc(100% - 50px);
}
#printoder{
  margin-top: 200px;
}
.printTable {
    width:794px;
    height:1123px;
    margin: 0 auto;
    /* font-size: 15px; */
    border: 1px solid #333;
    border-collapse: collapse!important;
    th,td{
      text-align: left;
      padding: 10px 5px;
      border: 1px solid #333;
    }
    th {
      color:#333
    }
}
/* .content {
  width: 794px;
  height: 1000px;
  border: 1px solid #000;
  .title {
    text-align: center;
  }
  .th {
    display: flex;
    align-items: center;
    .th-1 {
      width: 166px;
      padding: 20px 0px;
      border-top: 1px solid #000;
      border-right: 1px solid #000;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .th-2 {
      width: 96px;
      padding: 20px 0px;
      border-top: 1px solid #000;
    }
    .th-2-1 {
      width: 96px;
      padding: 28px 0px;
      border-top: 1px solid #000;
    }
    .th-3 {
      width: 132px;
      padding: 20px 0px;
      border-top: 1px solid #000;
      border-right: 1px solid #000;
    }
    .th-3-1 {
      width: 132px;
      padding: 28px 0px;
      border-top: 1px solid #000;
      border-right: 1px solid #000;
    }
    .th-4 {
      width: 84px;
      padding: 20px 0px;
      border-top: 1px solid #000;
      border-right: 1px solid #000;
    }
    .th-4-1 {
      width: 84px;
      padding: 29.5px 0px;
      border-top: 1px solid #000;
    }
    .th-5 {
      width: 148px;
      padding: 28px 0px;
      border-top: 1px solid #000;
    }
    .th-5-1 {
      width: 148px;
      padding: 20px 0px;
      border-top: 1px solid #000;
    }
    .th-6 {
      width: 168px;
      padding: 20px 0px;
      border-top: 1px solid #000;
    }
        .th-6-1 {
      width: 168px;
      padding: 28px 0px;
      border-top: 1px solid #000;
    }
    .th-7 {
      width: 628px;
      padding: 20px 0px;
      border-top: 1px solid #000;
    }
        .th-7-1 {
      width: 628px;
      padding: 28.5px 0px;
      border-top: 1px solid #000;
    }
  }
} */
/* .th-l {
  border-bottom: 1px solid #000;
} */
/* .br-r {
  border-right: 1px solid #000;
} */
/* .time{
  text-align: right;
  padding: 20px 0px;
  margin-right: 200px;
} */
</style>
